<template>
	<view class="downLoad" :style="{height:myHeight+'rpx'}">
		<view class="top" :style="{height:statusBarHeight+64+'rpx'}">
			<view class="" :style="{height:statusBarHeight+'rpx'}" />
			<view style="height:64rpx;" :style="{top:statusBarHeight+'rpx'}" title="" :border-bottom='false' >
				<view>
					<view class="title">
						<view class="slot-wrap" style="align-items: center;display: flex;flex-wrap: row;" @click="goback">
							<image  ref='handleBack' style="margin-right: 50rpx;width: 35rpx;height: 35rpx;" src="@/static/images/left.png" ></image>
							<text class="customer" style="font-size: 32rpx;font-weight: 400;margin-left: -20rpx;">下载管理</text>
						</view>
						<!-- <view class="" style="width: 40rpx; height: 40rpx; background-color: #fff; border: 1rpx solid #000; border-radius: 25rpx;" @click="clearDownTasks"></view> -->
						<view class="slot-right">
							<view class="radius">
								<image @click="handleClose"  style="font-weight: 400;font-size: 32rpx;width: 40rpx;height: 40rpx;" v-if="isActive" src="@/static/images/my/xxxx.png" mode=""></image>
								<image  @click="handleDelete"  style="font-weight: 400;font-size: 32rpx;width: 40rpx;height: 40rpx;" v-else src="@/static/images/my/rwzx-xgnc.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<view class="download-list" :style="{width:myWidth+'px',height:myHeight-statusBarHeight-64+'rpx'}">
			<view class="" :style="{height:statusBarHeight+64+'rpx'}">
			</view>
			<view class="tabs"  style="display: flex;align-items: center;justify-content: center;height: 100rpx;">
				<view class="" :style="{width:(myWidth-33)/3+'px'}">
					<text>已下载</text>
					<text>(60个)</text>
				</view>
				<text style="width: 32px;text-align: center;">|</text>
				<view class="" :style="{width:(myWidth-33)/3+'px'}">
					<text>下载中</text>
					<text>(60个)</text>
				</view>
			</view>
			<swiper class="swiper" @change="swiperClick" :current="current"  :style="{width:myWidth+'px',height:myHeight-statusBarHeight-164+'rpx'}">
				<swiper-item>
					<text>aaaaa</text>
				</swiper-item>
				<swiper-item>
					<text>bbbb</text>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="downLoadList" :style="{height: isActive?`${myHeight-statusBarHeight-184}rpx`:`${myHeight-statusBarHeight-64}rpx`,marginTop:statusBarHeight+64+'rpx'}">
				<view class="Body" :style="{paddingBottom: (isActive)?120+'rpx':'0rpx'}">
					<view class="cards" v-for="(item,index) in pageList" :key='item.game_id' :style="{marginTop:28+'rpx' }">
						<view class="" v-if="isActive" style="margin-right: 12rpx;width: 40rpx;height: 40rpx;"	@click="handleDel(index)">
							<view v-if="!item.noActive" style="width: 40rpx;height: 40rpx;border-radius: 40rpx;border: 1px solid #EFEFEF;"></view>
							<image v-else src="@/static/images/view/down_acitve.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="">
							<image @longpress='longpress(index)' :src="item.icon" mode="widthFix" :style="{height:isActive?'140rpx':'167rpx',width:isActive?'140rpx':'167rpx'}" style="margin-right: 12rpx;margin-bottom: 20rpx;"></image>
						</view>
						
						<view class="gameRight" >
							<view class="gameDetail" @longpress='longpress(index)' :style="{height:isActive?'140rpx':'167rpx'}">
								<text class="gamename">{{item.gamename}}</text>
								<view class="" style="margin-bottom: 0rpx;">
									<text class="text" v-for="(v,i) in item.type" :key="i" v-if="i<3">{{v}}</text>
								</view>
								<view class="size">
									<text style="color: #FF5927;" v-if="item.myloading">{{item.myloading}}</text>
									<text v-if="item.myloading">/</text>
									<text v-if="item.myTotalData">{{item.myTotalData}}</text>
								</view>
							</view>
							<xw-downLoadButton ref="downLoadBtn" @delItem="delItem" :item='item' :isOpen='item.isOpen'></xw-downLoadButton>
						</view>
				
					</view>
				
				</view>
				<view class="bottom" v-if="isActive">
					<view class="Botradius" style="display: flex;align-items: center;">
						<image v-if="selectAll" src="@/static/images/view/down_acitve.png" mode="widthFix"	style="width: 40rpx;height: 40rpx;margin-right: 16rpx;"></image>
						<view v-else @click="handleAll"
							style="height: 40rpx;width: 40rpx;border-radius: 32rpx;border: 1rpx solid #efefef;margin-right: 16rpx;">
						</view>
						<text class="text" @click="handleNotall" v-if="selectAll">全不选</text>
						<text class="text" @click="handleAll" v-else>全选</text>
					</view>
					<view  class="button" @click="handleconfirm">已选择{{isNumber}}个游戏清除下载痕迹</view>
				</view>
				<view class="" style="height: 200rpx;background-color: #f2f2f2;">
					
				</view>
				<nvue-loading v-if="pageList.length==0" :isNoData='pageList.length==0?true:false'></nvue-loading>
		</view>
	</view>
</template>

<script>
	// import common from '@/common/js/common.js';
	
	export default {
		data() {
			return {
				current: 0,
				pageList: [],
				isTrue: true,
				//总数据
				progress: 0,
				isActive: false,
				isNumber: 0,
				selectAll: false,
				beDownLoading: [],
				downloaded: []
			}
		},
		computed: {
			myHeight() {
				return uni.getSystemInfoSync().windowHeight * (750 / uni.getSystemInfoSync().windowWidth)
			},
			myWidth() {
				return uni.getSystemInfoSync().windowWidth
			},
			statusBarHeight() {
				return uni.getSystemInfoSync().statusBarHeight * (750 / uni.getSystemInfoSync().windowWidth)
			}
		},
		methods: {
			swiperClick(e) {
				this.active = e.detail.current
			},
			delItem() {
				console.log('????')
				let taskList = this.$store.state.downTasksList  //获取当前下载管理列表
				this.pageList = [...taskList]
				console.log('目前pageList列表信息', this.pageList)
			},
			clearDownTasks() {
				plus.downloader.clear(-1)
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			//删除
			handleDelete() {
				uni.vibrateShort({
					success: () => {
						this.isActive = true
						
						this.isNumber = this.pageList.filter(item => {
							return item.noActive == true
						}).length;
						console.log('handleDel_当前下载列表选中数量：', this.isNumber, this.pageList.length)
					}
				})
			},
			handleClose() {
				this.handleNotall()
				this.isActive = false
			},
			//确认删除
			handleconfirm() {
				if (this.isNumber > 0) {
					console.log('删除数量:', this.isNumber)
					uni.showModal({
						title: '删除任务',
						content: '清除当前选择的任务？',
						success: (res) => {
							if (res.confirm) {
								console.log('handleconfirm:', 'success');
								let that = this
								let downTaskList = this.$store.state.downTasksList
								plus.downloader.enumerate(function(tasks){
									if (tasks.length) {
										console.log('tasksLength', tasks.length)
										console.log('downTaskList', downTaskList)
										console.log('pageList', that.pageList)
										that.pageList.forEach(item => {
											console.log('pageList_item', item)
											if (item.noActive == true) {
												downTaskList.splice(downTaskList.findIndex(taskitem => taskitem.game_id == item.game_id), 1)
												console.log('下载任务删除后的list:', downTaskList)
												tasks.forEach(task => {
													let downTaskItem = JSON.parse(task.options.data)
													console.log('taskAndtaskItem', downTaskItem)
													if (downTaskItem.game_id == item.game_id) {
														let fileName = task.filename
														console.log('删除下载任务:', fileName, item.gamename)
														task.abort()
													}
												})
											}
											
											if (item == that.pageList[that.pageList.length-1]) {
												console.log('????????????')
												that.pageList = [...downTaskList]
												console.log('操作完成后的pageList', that.pageList)
												that.$store.commit('setDownTasksList', downTaskList) // 更新列表数据
												if (downTaskList.length <= 0) {
													console.log('下载管理已清空')
													plus.downloader.clear(-1);
												}
											}
										})
									}
								},-1)
							}
							// this.handleNotall()
							this.isActive = false
						}
					})
				}
			},
			delTask(fileName) {
				console.log('delTask==' + fileName)
				plus.io.resolveLocalFileSystemURL(fileName, function(entry) {
					entry.remove(function(entry) {
						console.log('文件删除成功==' + fileName)
					}, function(e) {
						console.log('文件删除失败==' + fileName)
					})
				}, function(e) {
					console.log('文件获取失败==' + fileName)
				})
			},
			//全选
			handleAll() {
				this.isNumber = 0;
				
				this.pageList.map((item) => {
					item.noActive = true;
					this.isNumber++;
				})
				console.log('当前pageList：', this.pageList)
				console.log('downTaskList', this.downTaskList)
				
				this.selectAll = true;
			},
			//全不选
			handleNotall(){
				this.isNumber = 0;
				
				this.pageList.map((item) => {
					item.noActive = false;
				})
				console.log('当前pageList：', this.pageList)
					
				this.selectAll = false;
			},
			//筛选
			handleDel(i) {
				this.pageList[i].noActive = !this.pageList[i].noActive;
				console.log('当前pageList：', this.pageList)
				
				this.isNumber = this.pageList.filter(item => {
					return item.noActive == true
				}).length;
				console.log('handleDel_当前下载列表选中数量：', this.isNumber, this.pageList.length)
				
				if (this.pageList.length == this.isNumber) {
					this.selectAll = true;
					console.log('handleDel_全选：', this.selectAll)
				} else {
					this.selectAll = false;
					console.log('handleDel_非全选：', this.selectAll)
				}
			},
			//长按删除
			longpress(i) {
				uni.vibrateShort({
					success: () => {
						this.isActive = true
						this.pageList.map(item => {
							item.noActive = false
						})
						this.pageList[i].noActive = true
						this.isNumber = this.pageList.filter(item => {
							return item.noActive == true
						}).length
						
						if (this.pageList.length == this.isNumber) {
							this.selectAll = true;
							console.log('handleDel_全选：', this.selectAll)
						} else {
							this.selectAll = false;
							console.log('handleDel_非全选：', this.selectAll)
						}
					}
				});
			},
		},
		onLoad(option) {
			console.log('option:', option)
			let item = {}			
			// 判断是否有下载参数 判断是否有新的游戏下载
			if (Object.keys(option).length != 0) {
				item = JSON.parse(decodeURIComponent(option.item));
				console.log('点击下载跳转，item不为空', item)
				
				// andorid 下载鉴权 一旦有新游戏下载则先处理下载鉴权
				// if (item.down_url.indexOf('?') != -1) {
				// 	let url = item.down_url.split('?');
				// 	url = url[0].slice(url[0].length - 8, url[0].length);
				// 	// console.log('url', url);
				// 	if (url == 'down_apk') {
				// 		// console.log('url中有down_apk字段', item.down_url);
				// 		item.down_url = item.down_url.replace(/down_apk/, "down_apk_new")
				// 		// console.log('替换为apk_new:', item.down_url);
				// 		let sign = common.downLoadUrl_sign();
				// 		// console.log('生成签名sign:', sign);
				// 		item.down_url = item.down_url + '&sign=' + sign;
				// 	}
				// }
			}
			
			let taskList = this.$store.state.downTasksList  //获取当前下载管理列表
			if (Object.keys(item).length != 0) {
				console.log('hasNewGame')
				taskList.unshift(item); // 如果游戏参数有效 有新的游戏下载 则将该游戏下载参数塞进下载列表头
			}
			this.pageList = [...taskList]
			console.log('目前pageList列表信息', this.pageList)
			
		},
		onShow() {
			let taskList = this.$store.state.downTasksList  //获取当前下载管理列表
			this.pageList = [...taskList]
			console.log('目前pageList列表信息', this.pageList)
			this.beDownLoading = this.pageList.filter((item)=>{
				return item.status != 4
			})
			this.downloaded = this.pageList.filter((item)=>{
				return item.status == 4
			})
			// if (this.$refs.downLoadBtn) {
			// 	console.log('111111111111111111111111')
			// 	// console.log('downLoadBtn', this.$refs.downLoadBtn)
			// 	this.$nextTick(()=>{
			// 			this.$refs.downLoadBtn.handleResume()
			// 	})
			// }
			
			this.pageList.forEach((task, index) => { //遍历列表到找到当前游戏的下载任务
				console.log('packge_name', task.package_name, task.status, task.isOpen)
				if (plus.runtime.isApplicationExist({
						pname: task.package_name
					})) {
						this.pageList[index].isOpen = 9
						console.log('packge_name_status', task.status, task.isOpen)
					} else {
						this.pageList[index].isOpen = 0
					}
			})
			
			console.log('???', this.pageList)
		}
	}
</script>

<style lang="scss" scoped>
	.downLoad {
		background-color: #f2f2f2;
		.u-navbar {
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.16);

		}

		.title {
			flex: 1;
			padding: 0 $xw-padding;
			@include flex;
			flex-direction: row;
		}

		.customer {
			color: $xw-black-dark;
		}

		.radius {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
			@include flex;
			justify-content: center;
		}
		
		.Body {
			@include padding;

		}

		.cards {
			@include flex;
			margin: 48rpx auto 0;

			.gameRight {
				@include flex;
				justify-content: space-between;
				@include border_box;
				padding-bottom: 40rpx;

				.buttons {
					
					.button {
						white-space: nowrap;
						@include button(32rpx, 10rpx, 32rpx);
						font-size: $xw-font;
					}
				}
			}

			.gameDetail {
				// padding-top: 20rpx;
				width:350rpx;
				@include flex-column;
				align-items: flex-start;
				justify-content: space-around;
				// align-content: space-around;

				.gamename {
					color: $xw-black-dark;
					font-size: $xw-h3-font;
					font-weight: 700;
					// margin-bottom: 8rpx;
					@include overflow;
					max-width: 350rpx;

				}

				.size {
					// border: 1rpx solid red;
					height: 45rpx;
					width: 220rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					text {
						font-size: $xw-font;
						color: $xw-color;
					}
				}
			}

		}

		.text {
			font-size: $xw-font;
			color: $xw-color;
			margin-right: 8rpx;
		}
		
		.top {
			position: fixed;
			top: 0;
			z-index: 999;
			// height: rpx;
			width: 100%;
			// @include padding;
			// @include flex;
			background-color: #f2f2f2;
		}
		
		.bottom {
			position: fixed;
			bottom: 0;
			height: 120rpx;
			width: 100%;
			@include padding;
			@include flex;
			background-color: #f2f2f2;

			.button {
				@include button(32rpx, 12rpx, 100rpx);
				font-size: $xw-font;
				font-weight: 500;
				@include overflow;
				margin-right: 80rpx;
			}
		}
		.img_left{
			margin-left: 1rpx;
		}
	}
</style>